<template>
  <div>
    <van-cell title="头像" style="height:70px;line-height:70px;">
      <van-icon slot="right-icon">
        <img :src="baseUrl + userinfo.Head" style="width:50px;height:50px;border-radius: 50%;"/>
      </van-icon>
    </van-cell>
    <van-cell title="项目名称" :value="userinfo.ProjectName" />
    <van-cell title="施工日期" :value="userinfo.ProjectStartEnd" />
    <van-cell title="姓名" :value="userinfo.ChnName" />
    <van-cell title="身份证号" :value="userinfo.IDCard" />
    <van-cell title="手机号" :value="userinfo.Mobile" />
    <van-cell title="施工单位项目负责人" :value="userinfo.ManagerProject" />
    <van-cell title="电话" :value="userinfo.ManagerProjectTel" />
    <van-cell title="施工单位安全员" :value="userinfo.SupervisorProject" />
    <van-cell title="电话" :value="userinfo.SupervisorProjectTel" />
    <van-cell
      title="施工安全培训情况"
      :value="userinfo.ConstructSafeTrainPlanCnt + '次'"
    />
    <van-cell title="培训及考核情况" :value="userinfo.PlanName" />
    <van-cell
      title="进出场纪录"
      :value="userinfo.EntranceCnt + '次'"
      is-link
      link-type="navigateTo"
      @click="toEntrance()"
    />
    <van-cell-group title="证书情况">
      <van-cell v-for="(item, index) in userinfo.UserCertList" :key="index">
        <div>
          <div class="certBlock">
            <div class="certName">
              <span>名称：{{ item.CertName }}</span>
            </div>
            <div class="reviewDate">
              <span>有效期：{{ item.NextReviewDate | formatDate }}</span>
            </div>
          </div>
          <div
            class="att"
            v-for="(attach, att_index) in item.AttachList"
            :key="att_index"
            @click="goFile(attach.AttCode)"
          >
            {{ attach.AttName }}{{ attach.AttExt ? attach.AttExt : "" }}
          </div>
        </div>
      </van-cell>
    </van-cell-group>
    <div class="bottom_submit">
      <van-button class="in" type="info" @click="entranceIn()">
        入场确认
      </van-button>
      <van-button class="out" type="primary" @click="entranceOut()">
        出场确认
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  getConstructSafeProjectUser,
  entranceIn,
  entranceOut,
} from "@/api/constructSafeProject";
import { getDate } from "@/utils/getDate";
import { Dialog } from "vant";

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      code: this.$route.query.code,
      userinfo: {},
    };
  },
  created() {
    this.getUserDetail();
  },
  filters: {
    formatDate: function (value, args) {
      return getDate(value);
    },
  },
  methods: {
    getUserDetail() {
      let params = { code: this.code };
      getConstructSafeProjectUser(params).then((res) => {
        this.userinfo = res.data;
      });
    },
    // 文件页面
    goFile(attachCode) {
      this.$router.push("/Attach/AatachDetail?attCode=" + attachCode);
    },
    entranceOut() {
      Dialog.confirm({
        title: "询问",
        message: "你确定要对【" + this.userinfo.ChnName + "】进行出场确认么?",
      })
        .then(() => {
          let params = { code: this.code };
          entranceOut(params).then((res) => {
            this.$toast.success("出场确认成功！");
            this.getUserDetail();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    entranceIn() {
      Dialog.confirm({
        title: "询问",
        message: "你确定要对【" + this.userinfo.ChnName + "】进行入场确认么?",
      })
        .then(() => {
          let params = { code: this.code };
          entranceIn(params).then((res) => {
            this.$toast.success("入场确认成功！");
            this.getUserDetail();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    toEntrance() {
      this.$router.push(
        "/ConstructSafe/ConstructSafeProjectUserEntrance/ConstructSafeProjectUserEntranceList?code=" +
          this.code
      );
    },
  },
};
</script>

<style lang="less" scoped>

.certBlock {
  position: relative;
  display: flex;
  width: 100%;
}
.certBlock .certName {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.certBlock .reviewDate {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  overflow: hidden;
  color: #969799;
  text-align: right;
  vertical-align: middle;
}
.att {
  color: #0798ea;
  cursor: pointer;
}

.bottom_submit {
  display: flex;
  padding: 10px;
  .out {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .in {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    margin-right: 10px;
    flex: 1;
  }
}
</style>